import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaErrorPage, WeaDialog, WeaTop, WeaTab, WeaRightMenu, WeaNewScroll, WeaInput, WeaBrowser, WeaTextarea, WeaTools, WeaLocaleProvider } from 'ecCom';
import { Row, Button, Spin, Col, Input, Modal } from 'antd';
import { observable, action, toJS } from 'mobx';
import Collapse from '../collapse.js';
import AlertModal from '../AlertModal';
import * as smsManageApi from '../../apis/smsManage';

const getLabel = WeaLocaleProvider.getLabel;

@inject('smsManageStore')
@observer
class ViewSms extends React.Component {
	constructor(props) {
    	super(props);
	    this.state = {
	      	msg: '',
	      	sender: [],
          reciever: [],
          statusMsg: '',
	      	status: '',
	      	visible: false,
          smsId: '',
          failReason: '',
	    };
	  }

	componentDidMount() {
	 }
	 componentWillReceiveProps(nextProps) {
	 	this.setState({ visible: nextProps.visible });
	 	let { smsId } = this.props.smsManageStore;
		if (smsId) {
			smsManageApi.viewSms({ messageId: smsId }).then((data) => {
		 		this.setState({
		 			msg: data.msg,
		 			sender: data.sender,
           reciever: data.reciever,
           statusMsg: data.statusMsg,
		 			status: data.status,
		 			sendnumber: data.sendnumber,
           recievenumber: data.recievenumber,
           failReason: data.failReason,

		 		});
		 	});
		}
	 }
    render() {
	    let titlecol = 5;
	    let fieldcol = 15;
	    let title = getLabel(384211, '查看短信内容');
		let memberIDsBrowserParam = {
	      hasAddBtn: false,
	      hasAdvanceSerach: true,
	      isAutoComplete: 1,
	      isDetail: 0,
	      isMultCheckbox: false,
	      isSingle: false,
	      linkUrl: '/hrm/resource/HrmResource.jsp?id=',
	      quickSearchName: '',
	      title: getLabel(839, '多人力资源'),
	      type: '17',
	      viewAttr: 2,
	    };

		let col16Style = {
	      marginLeft: '43px',
	      borderBottom: '1px solid #dddddd',
        paddingLeft: '10px',
        wordBreak: 'break-all',
    };
        return (
            <div className="sms-viewSms" style={{ height: '100%' }}>
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@oa3x34`}
              visible={this.state.visible}
              title={title}
              icon="icon-coms-message"
              iconBgcolor="#0079de"
              className="createWorkPlan"
              buttons={[]}
              style={{ width: '605px', height: '335px' }}
              onCancel={this.doClose}
            >
			  		<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@jqqk4g`} height={335}>
						<div style={{ height: '100%', paddingTop: '30px' }} className="">

			            	<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1a8073`} className="" style={{ height: '35px', marginBottom: '10px' }}>
				                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nqirww`} span={titlecol} style={{ paddingLeft: '48px' }}>
									{getLabel(16975, '发送人')}
				                </Col>
			                	<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ad31qa`} span={fieldcol} style={col16Style}>
									<span style={{ display: 'inline-block' }}>
										<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@n9ehph`}
  {...memberIDsBrowserParam}
  replaceDatas={this.state.sender}
  viewAttr={1}
										/>
									</span>
									<span style={{ display: 'inline-block' }}>{this.state.sendnumber}</span>
			                	</Col>
			            	</Row>

			            	<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qfegk4`} className="" style={{ minHeight: '35px', marginBottom: '10px' }}>
				                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yk2i2p`} span={titlecol} style={{ paddingLeft: '48px' }}>
									{getLabel(15525, '接收人')}
				                </Col>
			                	<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@s0o944`} span={fieldcol} style={col16Style}>
									<span style={{ display: 'inline-block' }}>
										<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@p2em68`}
  {...memberIDsBrowserParam}
  replaceDatas={this.state.reciever}
  viewAttr={1}
										/>
									</span>
									<span style={{ display: 'inline-block' }}>{this.state.recievenumber}</span>
			                	</Col>
			            	</Row>
			            	<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qtspw5`} className="" style={{ minHeight: '35px', marginBottom: '10px' }}>
				                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7y3x1y`} span={titlecol} style={{ paddingLeft: '48px' }}>
									{getLabel(18529, '短信内容')}
					         	</Col>
					          	<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@mggrdl`} span={fieldcol} style={col16Style}>
					            	<span>{this.state.msg}</span>
					          	</Col>
			            	</Row>

			            	<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@g6h9zr`} className="" style={{ height: '35px', marginBottom: '10px' }}>
				                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x67y15`} span={titlecol} style={{ paddingLeft: '48px' }}>
									{getLabel(18523, '短信状态')}
				                </Col>
			                	<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d02p5h`} span={fieldcol} style={col16Style}>
			                		<span>{this.state.statusMsg}</span>
			                	</Col>
			            	</Row>
                    {this.state.status === '3' && this.state.failReason!=='' && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9trnpa`} className="" style={{ height: '35px', marginBottom: '10px' }}>
				                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f1ictw`} span={titlecol} style={{ paddingLeft: '48px' }}>
									{getLabel(27041, '失败原因')}
				                </Col>
			                	<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nuxx8u`} span={fieldcol} style={col16Style}>
			                		<span>{this.state.failReason}</span>
			                	</Col>
			            	</Row>}
						</div>
					</WeaNewScroll>
			  </WeaDialog>
            </div>
        );
    }
    doClose =() => {
		this.props.doClose && this.props.doClose();
	}
}

export default ViewSms;
